<template>
    <div class="inputMsgToAi" :style="inputStyle">
        <van-field
            v-model="message"
            rows="1"
            autosize
            label=""
            type="textarea"
            placeholder="请输入要查询的内容"
            @blur="handleBlur"
            @focus="handleFocus"
        />

        <div class="optBtnWrapper" @click="handleSend">
           <!-- <van-button   type="primary" icon="upgrade">发送</van-button> -->
            <!-- <van-icon name="upgrade" size="30" color="#4385f5"/> -->
             <img :src="iconSend" class="sendImg" />
        </div>
    </div>
</template>
<script lang="ts" setup>
import {computed, nextTick, ref} from 'vue'
import iconSend from '@/assets/icons/icon_send.png'
import DialogTool from '@/util/DialogTool'
const message = ref('')
const emit =  defineEmits(['send'])


const handleSend = ()=>{    

    if(!message.value){
        DialogTool.showToast("请输入要查询的内容！")
        return;
    }

    var newMsg = message.value;
    message.value = ''
    emit('send',newMsg)
}

const paddingBottom = ref('10px');
const inputStyle = computed(()=>{
    return {
        paddingBottom:paddingBottom.value
    }
});

const handleBlur = ()=>{
    setTimeout(() => {
       paddingBottom.value = "10px"
        
    }, 200);
    
}

const handleFocus = ()=>{
    paddingBottom.value = "290px"
}

</script>

<style lang="less" scoped>
.inputMsgToAi{
    position: fixed;
    bottom: 0;
    width: 100%;    
    display: flex;
    padding:10px 0 10px 10px;
    background-color: #f2f2f2;

    .optBtnWrapper{
        width:80px;
        display: flex;
        align-items: flex-end;
        padding-bottom: 2px;
        justify-content: center;

        .sendImg{
            width:40px;
        }
    }
}
</style>

<style>
.inputMsgToAi .van-cell.van-field{
    border:1px solid  #4385f5;
    border-radius:25px;
}
</style>